<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <!-- Use Chrome Frame in IE -->
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <meta name="description" content="Adjust the height of a 3D Tiles tileset." />
  <meta name="cesium-sandcastle-labels" content="3D Tiles" />
  <title>无人机村庄</title>
  <script type="text/javascript" src="../Sandcastle-header.js"></script>
  <script type="text/javascript" src="../../../Build/CesiumUnminified/Cesium.js" nomodule></script>
  <script type="module" src="../load-cesium-es6.js"></script>
</head>

<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
  <style>
    @import url(../templates/bucket.css);

    #toolbar {
      background: rgba(42, 42, 42, 0.8);
      padding: 4px;
      border-radius: 4px;
    }

    #toolbar input {
      vertical-align: middle;
      padding-top: 2px;
      padding-bottom: 2px;
    }
  </style>
  <div id="cesiumContainer" class="fullSize"></div>
  <div id="loadingOverlay">
    <h1>初始化中...</h1>
  </div>
  <div id="toolbar">
    <div>Height</div>
    <input type="range" min="-100.0" max="100.0" step="1" data-bind="value: height, valueUpdate: 'input'" />
    <input id="heightInput" type="text" size="5" data-bind="value: height" />
  </div>
  <script id="cesium_sandcastle_script">
    window.startup = function (Cesium) {
      "use strict";
      //Sandcastle_Begin
      const viewer = new Cesium.Viewer("cesiumContainer", {
        //上方组件
        //geocoder:false,//搜索组件
        homeButton:false,//首页位置，可跳转到默认视角
        sceneModePicker:false,//场景模式切换（2d,3d)
        baseLayerPicker:false,//图层选择器
        navigationHelpButton:false,//帮助提示（小问号）
        //下方组件
        animation:false,//动画组件
        timeline:false,//时间轴

        //载入地图资产
        terrainProvider: new Cesium.CesiumTerrainProvider({
            url: Cesium.IonResource.fromAssetId(3957),
            requsestVertexNormal:true,
            requestWaterMask:true
        })
      });

      viewer._cesiumWidget._creditContainer.style.display = "none";


      //3D
      viewer.scene.globe.depthTestAgainstTerrain = true;

      const viewModel = {
        height: 0,
      };

      Cesium.knockout.track(viewModel);

      const toolbar = document.getElementById("toolbar");
      Cesium.knockout.applyBindings(viewModel, toolbar);

      const tileset = new Cesium.Cesium3DTileset({
        url: "../../modelA/tileset.json",
      });

      tileset.readyPromise
        .then(function (tileset) {
          viewer.scene.primitives.add(tileset);
          viewer.zoomTo(
            tileset,
            new Cesium.HeadingPitchRange(
              0.0,
              -0.5,
              tileset.boundingSphere.radius * 2.0
            )
          );
        })
        .catch(function (error) {
          console.log(error);
        });

      Cesium.knockout
        .getObservable(viewModel, "height")
        .subscribe(function (height) {
          height = Number(height);
          if (isNaN(height)) {
            return;
          }

          const cartographic = Cesium.Cartographic.fromCartesian(
            tileset.boundingSphere.center
          );
          const surface = Cesium.Cartesian3.fromRadians(
            cartographic.longitude,
            cartographic.latitude,
            0.0
          );
          const offset = Cesium.Cartesian3.fromRadians(
            cartographic.longitude,
            cartographic.latitude,
            height
          );
          const translation = Cesium.Cartesian3.subtract(
            offset,
            surface,
            new Cesium.Cartesian3()
          );
          tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        });

      //Sandcastle_End
      Sandcastle.finishedLoading();
    };
    if (typeof Cesium !== "undefined") {
      window.startupCalled = true;
      window.startup(Cesium);
    }

    /*修改模型初始位置
  const changeHeight = document.getElementById("heightInput");
    changeHeight.onclick();
    const keyBorad = new KeyboardEvent('keyDown',{
      bubbles:true,
      cancelable:true,
      keyCode:39
    });
    document.body.dispatchEvent(keyBorad);
    */

  </script>
</body>

</html>